<template>
  <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
    <div class="navbar">软工后台管理系统</div>
    <el-sub-menu class="menu" index="1">
      <template #title>
        欢迎你，{{ username }}同学！
      </template>
      <router-link :to="{ name: 'setting' }">
        <el-menu-item index="5">个人中心</el-menu-item>
      </router-link>
      <el-menu-item index="6" @click="onLogout">退出登录</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { onMounted } from 'vue'
import { getAdmin } from '../api'
import router from '../router'
import notification from '../utils/notification'
const username = localStorage.getItem('username') || ''
const onLogout = async () => {
  router.push({ name: 'login' })
  localStorage.removeItem('token')
  localStorage.removeItem('username')
  notification({
    message: '退出成功',
    type: 'success'
  })
}
</script>

<style scoped lang="scss">
.el-menu-demo {
  background: linear-gradient(90deg, #1493fa, #01c6fa);
}

.navbar {
  color: white;
  font-size: 20px;
}

.menu {
  margin-left: auto;
}
</style>